import React, { useState, useEffect } from 'react';
import { useNavigate, useLocation } from "react-router-dom";
import './style.scss';

function Tabbar() {
    const navigate = useNavigate();
    const location = useLocation();
    const [pathname, changePath] = useState(location.pathname || ''); //当前路由
    const tabbarList = [{
        title: 'Home',
        path: '/home',
        iconSrc: ''
    }, {
        title: 'About',
        path: '/about',
        iconSrc: ''
    }, {
        title: 'Mine',
        path: '/mine',
        iconSrc: ''
    }];

    //页面跳转
    function changePage(item, index) {
        // console.log(item, index)
        navigate(item.path);
        changePath(item.path);
    }

    return (
        <div className='tabbar'>
            <ul>
                {
                    tabbarList.map((item, index) => {
                        let pn = pathname == '/' && '/home' || pathname;
                        let action = pn == item.path && 'action' || '';
                        return (
                            <li key={index} className={action} onClick={() => changePage(item, index)}>
                                <span>{item.title}</span>
                            </li>
                        )
                    })
                }
            </ul>
        </div>
    );
}

export default Tabbar;
